<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/head :: commonHead('风险列表')">
    <!-- 页面特定样式将由通用头部替代 -->
</head>
<body class="bg-light">
    <div class="container py-4">
        <div class="row mb-4">
            <div class="col">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <h2 class="fw-bold text-primary mb-2">风险列表</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a th:href="@{/}" class="text-decoration-none">首页</a></li>
                                <li class="breadcrumb-item active" aria-current="page">风险列表</li>
                            </ol>
                        </nav>
                    </div>
                    <div>
                        <a th:href="@{/}" class="btn btn-outline-secondary">
                            <i class="fas fa-home"></i> 返回首页
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-list-ul me-2"></i>所有风险</h5>
                        <div class="d-flex align-items-center">
                            <div class="input-group me-3" style="width: 250px;">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" class="form-control bg-light border-start-0" id="riskSearchInput" placeholder="搜索风险...">
                            </div>
                            <div class="btn-group">
                                <a th:href="@{/risk/add}" class="btn btn-primary">
                                    <i class="fas fa-plus"></i> 新增风险
                                </a>
                                <a th:href="@{/risk/my}" class="btn btn-outline-secondary ms-2">
                                    <i class="fas fa-user"></i> 我的风险
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0" id="riskTable">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col" class="text-center" style="width: 60px;">#</th>
                                        <th scope="col">风险名称</th>
                                        <th scope="col">所属项目</th>
                                        <th scope="col" class="text-center">风险类型</th>
                                        <th scope="col" class="text-center">可能性</th>
                                        <th scope="col" class="text-center">影响度</th>
                                        <th scope="col" class="text-center">优先级</th>
                                        <th scope="col" class="text-center">状态</th>
                                        <th scope="col">责任人</th>
                                        <th scope="col" style="width: 160px;">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${risks.empty}">
                                        <td colspan="10" class="text-center py-4">
                                            <i class="fas fa-info-circle text-muted me-1"></i> 暂无风险数据
                                        </td>
                                    </tr>
                                    <tr th:each="risk : ${risks}" th:data-id="${risk.id}">
                                        <td class="text-center" th:text="${risk.id}"></td>
                                        <td>
                                            <strong th:text="${risk.title}"></strong>
                                        </td>
                                        <td th:text="${risk.projectName}"></td>
                                        <td class="text-center">
                                            <span th:if="${risk.type == 1}" class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="技术相关的风险">技术风险</span>
                                            <span th:if="${risk.type == 2}" class="badge bg-info" data-bs-toggle="tooltip" data-bs-placement="top" title="项目管理相关的风险">管理风险</span>
                                            <span th:if="${risk.type == 3}" class="badge bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="商业决策相关的风险">商业风险</span>
                                            <span th:if="${risk.type == 4}" class="badge bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="法律法规相关的风险">法律风险</span>
                                            <span th:if="${risk.type == 5}" class="badge bg-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="其他类型的风险">其他风险</span>
                                        </td>
                                        <td class="text-center">
                                            <span th:if="${risk.probability == 1}" class="badge bg-light text-dark border">很低</span>
                                            <span th:if="${risk.probability == 2}" class="badge bg-info text-white">低</span>
                                            <span th:if="${risk.probability == 3}" class="badge bg-secondary text-white">中</span>
                                            <span th:if="${risk.probability == 4}" class="badge bg-warning text-dark">高</span>
                                            <span th:if="${risk.probability == 5}" class="badge bg-danger text-white">很高</span>
                                        </td>
                                        <td class="text-center">
                                            <span th:if="${risk.impact == 1}" class="badge bg-light text-dark border">很低</span>
                                            <span th:if="${risk.impact == 2}" class="badge bg-info text-white">低</span>
                                            <span th:if="${risk.impact == 3}" class="badge bg-secondary text-white">中</span>
                                            <span th:if="${risk.impact == 4}" class="badge bg-warning text-dark">高</span>
                                            <span th:if="${risk.impact == 5}" class="badge bg-danger text-white">很高</span>
                                        </td>
                                        <td class="text-center">
                                            <span th:if="${risk.level == 1}" class="badge bg-light text-dark border">很低</span>
                                            <span th:if="${risk.level == 2}" class="badge bg-info text-white">低</span>
                                            <span th:if="${risk.level == 3}" class="badge bg-secondary text-white">中</span>
                                            <span th:if="${risk.level == 4}" class="badge bg-warning text-dark">高</span>
                                            <span th:if="${risk.level == 5}" class="badge bg-danger text-white">很高</span>
                                        </td>
                                        <td class="text-center">
                                            <span th:if="${risk.status == 1}" class="badge bg-secondary text-white" data-bs-toggle="tooltip" data-bs-placement="top" title="风险已被识别但尚未分配责任人">已识别</span>
                                            <span th:if="${risk.status == 2}" class="badge bg-primary text-white" data-bs-toggle="tooltip" data-bs-placement="top" title="风险已分配给责任人">已分配</span>
                                            <span th:if="${risk.status == 3}" class="badge bg-info text-white" data-bs-toggle="tooltip" data-bs-placement="top" title="已制定风险响应计划">已计划</span>
                                            <span th:if="${risk.status == 4}" class="badge bg-warning text-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="风险响应计划正在执行中">监控中</span>
                                            <span th:if="${risk.status == 5}" class="badge bg-success text-white" data-bs-toggle="tooltip" data-bs-placement="top" title="风险已成功应对解决">已解决</span>
                                            <span th:if="${risk.status == 6}" class="badge bg-danger text-white" data-bs-toggle="tooltip" data-bs-placement="top" title="风险已关闭（可能是已过期或不再相关）">已关闭</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span th:if="${risk.ownerName != null}" th:text="${risk.ownerName}"></span>
                                                <span th:if="${risk.ownerName == null}" class="text-muted fst-italic">未分配</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a th:href="@{/risk/{id}(id=${risk.id})}" class="btn btn-outline-info btn-sm" title="查看详情">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a th:href="@{/risk/edit/{id}(id=${risk.id})}" class="btn btn-outline-primary btn-sm" sec:authorize="hasAnyRole('ADMIN', 'MANAGER')" title="编辑风险">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a th:href="@{/risk-response/add/{id}(id=${risk.id})}" class="btn btn-outline-success btn-sm" title="添加响应计划">
                                                    <i class="fas fa-reply"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>风险统计</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <div class="card bg-primary text-white">
                                    <div class="card-body text-center py-3">
                                        <h3 th:text="${risks != null ? risks.size() : 0}" class="mb-1"></h3>
                                        <p class="mb-0">总风险数</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="card bg-warning text-dark">
                                    <div class="card-body text-center py-3">
                                        <h3 th:text="${unsolvedCount != null ? unsolvedCount : 0}" class="mb-1"></h3>
                                        <p class="mb-0">未解决风险</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="card bg-success text-white">
                                    <div class="card-body text-center py-3">
                                        <h3 th:text="${solvedCount != null ? solvedCount : 0}" class="mb-1"></h3>
                                        <p class="mb-0">已解决风险</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="card bg-danger text-white">
                                    <div class="card-body text-center py-3">
                                        <h3 th:text="${highPriorityCount != null ? highPriorityCount : 0}" class="mb-1"></h3>
                                        <p class="mb-0">高优先级风险</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        $(function() {
            // 初始化工具提示
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
            
            // 风险搜索功能
            $('#riskSearchInput').on('keyup', function() {
                var value = $(this).val().toLowerCase();
                $('#riskTable tbody tr').filter(function() {
                    // 检查所有相关列是否包含搜索内容 - 使用title而不是name
                    var rowText = $(this).find('td:nth-child(2)').text().toLowerCase() + ' ' + 
                                  $(this).find('td:nth-child(3)').text().toLowerCase() + ' ' +
                                  $(this).find('td:nth-child(4)').text().toLowerCase() + ' ' +
                                  $(this).find('td:nth-child(9)').text().toLowerCase();
                    var visible = rowText.indexOf(value) > -1;
                    $(this).toggle(visible);
                });
                
                // 显示搜索结果提示
                var visibleRowCount = $('#riskTable tbody tr:visible').length;
                if (value && visibleRowCount === 0) {
                    if ($('#noResultsMessage').length === 0) {
                        $('#riskTable tbody').append(
                            '<tr id="noResultsMessage"><td colspan="10" class="text-center py-4">' +
                            '<i class="fas fa-info-circle text-muted me-1"></i> 未找到匹配的风险数据</td></tr>'
                        );
                    }
                } else {
                    $('#noResultsMessage').remove();
                }
            });
            
            // 表格行点击事件 - 跳转到详情页
            $('#riskTable tbody tr').click(function(e) {
                // 如果点击的是按钮或按钮内的元素，不触发行点击事件
                if ($(e.target).closest('.btn, .btn-group').length === 0) {
                    var riskId = $(this).data('id');
                    if (riskId) {
                        window.location.href = '/risk-management/risk/' + riskId;
                    }
                }
            });
            
            // 鼠标悬停样式
            $('#riskTable tbody tr').hover(
                function() {
                    if (!$(this).find('td').first().hasClass('empty-row')) {
                        $(this).css('cursor', 'pointer').addClass('table-hover-active');
                    }
                },
                function() {
                    $(this).css('cursor', 'default').removeClass('table-hover-active');
                }
            );
        });
    </script>
    
    <style>
        .table-hover-active {
            background-color: rgba(0, 123, 255, 0.05);
        }
        
        .badge {
            font-weight: 500;
            font-size: 85%;
            padding: 0.35em 0.65em;
        }
        
        #riskTable th, #riskTable td {
            padding: 0.75rem;
            vertical-align: middle;
        }
        
        /* 确保表格列宽适当 */
        #riskTable th:nth-child(4),
        #riskTable th:nth-child(5),
        #riskTable th:nth-child(6),
        #riskTable th:nth-child(7),
        #riskTable th:nth-child(8) {
            width: 100px;
        }
    </style>
</body>
</html> 